<template>
 	<view :class="currentTheme">
 		<a-nabbar name="门店详情" />
 		<u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
 		<view class="padding-env">
 			<view class="theme u-padding-top-16">
 				<list-item :isImage="false" :rankDetail="false" :item="item" :padding="20" :isList="false"
 					:starSize="30">
 					<view slot="content" style="width: 100%;">
 						<contact :item="item" />
 					</view>
					<!-- <view class="fansNum" slot="user" @click="fansDetail(item)">Ta的粉丝团{{item.fansGroupCount || 0}}</view> -->
 					<view slot="footer"></view>
					<view slot="name" class="u-flex-1 u-flex" style="width: 0;">
						<view class="box-title  text-bold u-font-36 u-line-1 item-name">
							{{item.name || ''}}
						</view>
						<text class="u-margin-left-18 u-margin-right-20 fansNum"
							@click="fansDetail(item)">Ta的粉丝团 {{item.fansGroupCount || 0}}</text>
					</view>
 				</list-item>
 			</view>
 			<view class="u-margin-top-20 u-padding-left-32 u-padding-right-32">
 				<view class="u-margin-bottom-20">
 					<view class="u-font-28 box-title u-margin-bottom-22">人员配置</view>
 					<item-box>
 						<scroll-view scroll-x :scroll-y="false" class="scroll-view-list"
 							v-if="item.dmUser&&item.dmUser.length">
 							<view class="u-flex u-margin-left-10">
 								<view v-for="(c,index) in item.dmUser" :key="index"
 									class="u-margin-right-10 u-margin-top-20 u-margin-left-10" @click="dmClick(c)">
									 <view  v-if="c">
										<item-image :img="c.avatar" :width="192" :height="300" :radius="10" />
 										<view class="u-text-center u-line-1 scroll-view-item u-text-center content-desc-item">{{c.nickname}}</view>
									 </view>
 									
 								</view>
 							</view>
 						</scroll-view>
 						<view class="u-border-top" v-else>
 							<view class="u-padding-32">
 								<view class="u-text-center u-font-28 text-color-DEDEDE">暂无人员配置</view>
 							</view>
 						</view>
 					</item-box>
 				</view>
 				<empty v-if="item.dmUser&&item.dmUser.length==0"></empty>
 				<view class="u-margin-top-20 u-margin-bottom-20">
 					<view class="u-font-28 box-title u-margin-bottom-22 u-margin-top-20">剧本列表</view>
 					<view v-for="(item,index) in item.storeProducts" :key="index" class="u-margin-top-20">
 						<list-item :item="item" :isShare="false" :showTime="false">
 							<view slot="footer" class="u-flex u-row-between">
 							</view>
 						</list-item>
 					</view>
 				</view>
 				<empty v-if="item.storeProducts&&item.storeProducts.length==0"></empty>
 			</view>
 			<view class="u-padding-32">
 				<item-box :padding="0">
 					<view class="u-flex u-row-between u-padding-32">
 						<view class="">
 							<text class="box-title u-font-26">门店评价</text>
 							<text class="box-title u-font-24 u-margin-left-24"
 								v-if="replyListTotal>0">{{replyListTotal}}条</text>
 						</view>
 						<view class="box-title u-font-26" @click="moreReply" v-if="replyListTotal!==0">
 							查看更多 <u-icon name="arrow-right"></u-icon>
 						</view>
 					</view>
 					<view class="u-border-top">
 						<view class="u-padding-32">
 							<template v-if='replyList.length'>
 								<reply-item v-for="(item,index) in replyList" :key="index" :item="item"></reply-item>
 							</template>
 							<empty v-else :option="{tip:'暂无门店评价记录'}"></empty>
 						</view>
 					</view>
 				</item-box>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
 	import {
 		getDetail,
 		customRequest
 	} from '@/api/crud.js'
 	import carManager from '@/mixins/carManager.js'
 	import replyItem from '@/components/replyItem/replyItem.vue'
	import contact from '@/pagesA/acomponents/contact/contact.vue'
 	import {
 		mapGetters
 	} from 'vuex'
 	export default {
 		mixins: [carManager],
 		data() {
 			return {
 				apiModule: 'shopApi',
 				item: {},
 				option: [],
 				replyList: [],
 				replyListTotal: 0,
 			};
 		},
 		components: {
 			empty,
 			replyItem,contact
 		},
 		computed: {
 			tags() {
 				return this.splitStr(this.item.categoryDescription)
 			},
 			bannerList() {
 				return this.splitStr(this.item.sliderImage).map(this.imgFilter)
 			},
 			...mapGetters(['loginForm', 'scene']),
 			userType() {
 				return this.loginForm.userType || 'store'
 			},
 			isStore() {
 				return this.userType === 'store'
 			}
 		},
 		onLoad(option) {

 			this.option = option;
 		},
 		onShow() {
 			getDetail({
 				...this.option,
 				uid: this.loginForm.uid
 			}, 'systemStore', this.apiModule, 'getDetails').then(data => {
 				this.item = data
 				this.$u.mpShare = {
 					title: data.name,
 					imageUrl: this.imgFilter(data.image)
 				}
 			})
 			getDetail({
 				storeId: this.option.id,
 				size: 5,
 				//storeId:option.storeId
 			}, 'systemStoreComment', 'shopApi', 'getSystemStoreComments').then(data => {
 				this.replyList = data.content.map(val => {
 					val.score = val.storeScore
 					val.imgs = val.image.split(',')
 					return val;
 				});
 				this.replyListTotal = data.totalElements
 			})
 		},
 		methods: {
 			fansDetail(item) {
 				this.$u.route({
 					url: `/pages/fans/index`,
 					params: {
 						userType: 'store',
 						uid: item.groupUsers[0].uid,
 					}
 				})
 			},
 			dmClick(item) {
 				this.previewUrls([item.avatar])
 			},
 			splitStr(str) {
 				return str && str.split(',') || []
 			},
 			//预览
 			bannerListPreview(index) {
 				this.previewUrls(this.bannerList, index)
 			},
 			//预约组局
 			async createTeam(item, pagetype) {
 				try {
 					await this.loginValidate();
 					const type = pagetype == 'online' ? 1 : 0
 					getDetail({
 						productId: item.id,
 						storeId: this.option.id,
 						type
 					}, 'gatherGame', this.apiModule, 'findWaitRunning').then(res => {
 						const isList = Array.isArray(res) && res.length != 0;
 						const url = isList && res.length > 1 ? 'teamList' : 'createTeam';
 						const params = {
 							id: item.id,
 							storeId: this.option.id,
 							name: item.name,
 							type
 						};
 						if (!isList) params.teamId = res;

 						if (isList && res.length == 1) {
 							params.teamId = res[0].id;
 							// item.productId始终为空 加入组局后res[0].productId的返回也为空 所以都为空则相等 则在组局中 反之不在组局中
 							if (item.productId == res[0].productId) {
 								this.$u.toast('您已经在组局啦')
 								return false;
 							}
 						}
 						this.$u.route({
 							url: `/pagesA/createTeam/${url}`,
 							params
 						})
 					})
 				} catch (e) {
 					//TODO handle the exception
 				}

 			},
			moreReply(){
					this.$u.route({
					url: "/pagesA/replyManager/replyManager",
					params: {
						label: '门店评价',
						type: 'store',
						storeId: this.option.id
					}
				})
			}
 		}
 	}
 </script>

 <style lang="scss" scoped>
 	.fansNum {
 		padding: 6rpx;
 		background: rgba($color: #FF8DC3, $alpha: 0.2);
 		border-radius: 6rpx;
 		color: #FF8DC3;
 		font-size: 18rpx;
 		margin-left: 12rpx;
 		text-align: center;
		display: inline-flex;
    z-index: 999;
 	}

 	.scroll-view-list {
 		height: 400rpx;
 	}

 	.padding-env {
 		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
 	}

 	.theme {
 		background: var(--stepper-button-disabled-color);
 	}

 	.scroll-view-item {
 		width: 160rpx;
 		margin: 18rpx auto;
 	}

 	.subscribe {
 		width: 143rpx;
 		text-align: center;
 		color: white;
 		font-size: 20rpx;
 		line-height: 46rpx;
 		background: var(--primary-color);
 		border-radius: 23px;
 	}
 	.text-white-black-reversal {
 		color: white
 	}
 </style>
